<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <!--<ion-buttons start>-->
      <!--<button tappable ion-button icon-only (click)="goHomeMenuPage()">-->
        <!--<ion-icon color="Gray-color" name="menu"></ion-icon>-->
      <!--</button>-->
    <!--</ion-buttons>-->
    <ion-title>
      <div style="margin: 15px 0" >
        <p tappable (click)="gotoQRCodePage()">{{userName}}</p>
        <p class="cut-title">欢迎来到{{factoryName}}</p>
      </div>
    </ion-title>
    <ion-buttons *ngIf="messageCount > 0" end>
      <button tappable ion-button icon-only (click)="gotoUnreadMessage()" >
        <ion-icon color="Gray-color" name="ios-mail-outline">
          <ion-badge class="bage-message">{{messageCount}}</ion-badge>
        </ion-icon>
      </button>
    </ion-buttons>
    <ion-buttons end>
      <button tappable ion-button icon-only (click)="gotoHomePage()" >
        <ion-icon color="Gray-color" name="ios-home-outline">
        </ion-icon>
      </button>
    </ion-buttons>
    <ion-buttons end>
      <button tappable ion-button icon-only (click)="goSettingPage()" >
        <ion-icon color="Gray-color" name="settings">
        </ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>


<ion-content>
  <ion-list no-lines>
    <div *ngFor="let item of dataList" class="my-card">
      <ion-item-sliding>
        <ion-item tappable (click)="gotoDetailList(item)">
          <!--<img src="https://dininghall.blob.core.windows.net/product/bb4ecee246e44ebdad0ef41ca1e8320e.png"/>-->
          <img src="{{item.list[0].blobPath}}"/>
          <!--<img src='assets/imgs/test.png' alt="">-->
          <div class="back-ground">

          </div>
          <div class="card-title">
            <div style="font-size: 3rem">
              {{item?.list[0].mealType}}
            </div>
            <div style="font-size: 1.7rem">
              {{item?.list[0].productName}}
            </div>
            <div style="font-size: 1.7rem;font-weight: bolder">
              {{item?.list[0].factoryName}}-{{item?.list[0].officeName}}
            </div>
          </div>
        </ion-item>
        <ion-item-options side="right">
          <button [ngClass]="{'unpack-btn':item?.list[0].isPack === '0'}" color="dark" ion-button (click)="pack(item?.list[0].id, item?.list[0].isPack)">
            <ion-icon name="ios-cube-outline"></ion-icon>
            打包
          </button>
          <button  color="secondary" ion-button (click)="holdOrder(item?.list[0].id)">
            <ion-icon name="ios-hand-outline"></ion-icon>
            留餐
          </button>
          <!--<button class="operator-button" color="light" ion-button (click)="edit(item?.list[0].id)">-->
            <!--<ion-icon name="ios-create-outline"></ion-icon>-->
            <!--编辑-->
          <!--</button>-->
          <button ion-button color="danger" (click)="cancelOrder(item?.list[0].id)">
            <ion-icon name="ios-trash-outline"></ion-icon>
            退订
          </button>
        </ion-item-options>
      </ion-item-sliding>
      <div style="text-align: center;padding: 3px 0">
        <span *ngIf="item.dateStr === todayStr">今日您已预订</span>
        <span *ngIf="item.dateStr !== todayStr">{{item.dateStr}}</span>
      </div>
    </div>
  </ion-list>

  <div *ngIf="(isNull && dataList.length === 0)" class="null-tips">
    <!--<img src="assets/imgs/null.png" alt="">-->
    <div>暂无数据</div>
  </div>

  <!--<ion-list>-->
    <!--<ion-item-sliding  style="margin-bottom: 3vh">-->
      <!--<ion-item>-->
        <!--<img src="https://dininghall.blob.core.windows.net/product/bb4ecee246e44ebdad0ef41ca1e8320e.png"/>-->
        <!--<div class="card-title">-->
          <!--<div style="font-size: 2rem">-->
            <!--早餐-->
          <!--</div>-->
          <!--<div style="font-size: 1.7rem">-->
            <!--套餐1-->
          <!--</div>-->
          <!--<div style="font-size: 1.7rem">-->
            <!--十如-餐厅一-->
          <!--</div>-->
        <!--</div>-->
      <!--</ion-item>-->
      <!--<ion-item-options side="right">-->
        <!--<div class="btn-list">-->
          <!--<button class="operator-button" color="light" ion-button (click)="pack(item?.list[0].id, item?.list[0].isPack)">-->
            <!--<ion-icon name="ios-cube-outline"></ion-icon>-->
            <!--打包-->
          <!--</button>-->
          <!--<button class="operator-button" color="light" ion-button (click)="holdOrder(item?.list[0].id)">-->
            <!--<ion-icon name="ios-hand-outline"></ion-icon>-->
            <!--留餐-->
          <!--</button>-->
          <!--<button class="operator-button" color="light" ion-button (click)="edit(item?.list[0].id)">-->
            <!--<ion-icon name="ios-create-outline"></ion-icon>-->
            <!--编辑-->
          <!--</button>-->
          <!--<button class="operator-button" ion-button color="light" (click)="cancelOrder(item?.list[0].id)">-->
            <!--<ion-icon name="ios-trash-outline"></ion-icon>-->
            <!--退订-->
          <!--</button>-->
          <!--&lt;!&ndash;<button *ngIf="item?.list[0].isPack === 0" disabled="true" class="operator-button" color="light" ion-button (click)="pack(item?.list[0].id)">&ndash;&gt;-->
          <!--&lt;!&ndash;<ion-icon name="ios-cube-outline"></ion-icon>&ndash;&gt;-->
          <!--&lt;!&ndash;打包&ndash;&gt;-->
          <!--&lt;!&ndash;</button>&ndash;&gt;-->

        <!--</div>-->
        <!--&lt;!&ndash;<button class="operator-button" color="light" ion-button (click)="holdOrder(p.id, userId)">&ndash;&gt;-->
        <!--&lt;!&ndash;<ion-icon name="ios-hand-outline"></ion-icon>&ndash;&gt;-->
        <!--&lt;!&ndash;留餐&ndash;&gt;-->
        <!--&lt;!&ndash;</button>&ndash;&gt;-->
        <!--&lt;!&ndash;<button class="operator-button" ion-button color="danger" (click)="cancelOrder(p.id, userId)">&ndash;&gt;-->
        <!--&lt;!&ndash;<ion-icon name="ios-trash-outline"></ion-icon>&ndash;&gt;-->
        <!--&lt;!&ndash;退订&ndash;&gt;-->
        <!--&lt;!&ndash;</button>&ndash;&gt;-->
      <!--</ion-item-options>-->
    <!--</ion-item-sliding>-->
  <!--</ion-list>-->

</ion-content>
